<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1" v-show="isShow == 1 ">
            <el-button class="b1" type="primary" size="mini" @click="btnSaveGoodsApply()">申请办公用品</el-button>  
            <span>状态：</span>
            <el-select v-model="searchInfo.searchAState"  size="mini" style="width:120px">
              <el-option value = "0" label="全部" ></el-option>
              <el-option 
                v-for="dict in dict.type.a_state"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
              ></el-option>
            </el-select>
            <span> 使用方式: </span>
            <el-select v-model="searchInfo.searchAUseType"  size="mini" style="width:120px">
              <el-option value = "0" label="全部" ></el-option>
              <el-option 
              v-for="dict in dict.type.goods_user_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
              ></el-option>
            </el-select>
            <el-input class="in1" prefix-icon="el-icon-search" v-model="searchInfo.searchGoodsName"  placeholder="请输入办公用品名称" style="width:155px" size="mini"></el-input>
            <el-button type="primary" class="searchBtn" @click="getPage()" size="mini">查询</el-button>
        </div>
       <!-- 主体部分 -->
    <div class="div2"  v-show="isShow == 1">
        <el-table v-loading="loading" :data="pageGoodsApply.list">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="申领物品" prop="goodsName" :show-overflow-tooltip="true" />
            <el-table-column label="规格型号" prop="aGoodsType" :show-overflow-tooltip="true"/>
            <el-table-column label="使用方式" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.aUseType|filterGender}}</span>
                </template>
            </el-table-column>
            <el-table-column label="申领数量" prop="aNumber" :show-overflow-tooltip="true" />
            <el-table-column label="日期" prop="aNumber" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.aUseType == '1'">
                        <span>{{scope.row.aApplyTime|filterDateFormat1}}/{{scope.row.aReturnTime|filterDateFormat1}}</span>
                    </span>
                    <span v-if="scope.row.aUseType == '2'">
                        <span>{{scope.row.aApplyTime|filterDateFormat1}}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="状态" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span
                    v-for="dict in dict.type.a_state"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    v-if="dict.value == scope.row.aState"
                    >{{dict.label}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-row>
                        <el-button
                            size="mini"
                            type="text"
                            @click="tabChange(3,scope.row)"
                            v-hasPermi="['system:notice:edit']"
                            >详情</el-button>
                        <el-button
                            v-if="scope.row.aState == '1' "
                            size="mini"
                            type="text"
                            @click="editGoodsApply(scope.row)"
                            v-hasPermi="['system:notice:edit']"
                            >编辑</el-button>
                        <el-button
                            v-if="scope.row.aState == '2' || scope.row.aState == '1' "
                            size="mini"
                            type="text"
                            @click="cancelGoodsApply(scope.row)"
                            v-hasPermi="['system:notice:edit']"
                            >取消</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageGoodsApply.pageNum"
        :limit.sync="pageGoodsApply.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="listGoodsApplyList"
        />
    </div>

    <div class="saveDiv" v-show="isShow == 2 ">
        <div class = "saveDiv1" v-show="isShows == 1 ">
            <span>申领日期：</span>
            <span>{{goodsApply.aApplyTime|filterDateFormat1}} </span>
            <span> 申领部门：</span>
            <span>{{goodsApplyInfo.deptName}} </span>
            <span>  申领人：</span>
            <span>{{goodsApplyInfo.userName}}</span>
        </div>
        <div class = "saveDiv2">
            <el-form :model="goodsApply" label-width="120px" size="mini">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="申请物品">
                            <el-select v-model="goodsApply.aGoodsId"  @change="getGoodsApplyInfo" style="width:298px"> 
                                <el-option
                                    v-for="i in pageGoods.list"
                                    :key="i.value"
                                    :label="i.goodsName"
                                    :value="i.goodsId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="规格/型号">
                            <el-input v-model="goodsApply.aGoodsType" :disabled="flag"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="使用方式">
                            <el-input v-model="goodsApplyInfo.useType" :disabled="flag"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="当前库存">
                            <el-input v-model="goodsApply.aCurrentNumber" :disabled="flag"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="申请数量">
                            <el-input v-model="goodsApply.aNumber" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="申领日期">
                            <el-date-picker v-model="goodsApply.aGetTime" style="width:298px"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="归还日期">
                            <span v-if="goodsApply.aUseType == '1' || goodsApply.aUseType == '' ">
                                <el-date-picker v-model="goodsApply.aReturnTime" style="width:298px"></el-date-picker>
                            </span>
                            <span v-if="goodsApply.aUseType == '2'">
                                <span>无需归还</span>   
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="审批人">
                            <span v-if="goodsApply.aUseType == '1' || goodsApply.aUseType == ''">
                               <el-select v-model="goodsApply.aApproverId"  style="width:298px">
                                    <el-option
                                    v-for="dict in dict.type.a_approver_id"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                    >
                                    </el-option>
                               </el-select>
                            </span>
                            <span v-if="goodsApply.aUseType == '2' ">
                                <span>无需审批</span>
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="goodsApply.aRemarks" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="saveDiv3">
                <el-button type="primary" @click="isSaveGoodsApply()" size="mini">保存</el-button>
                <el-button @click="removeSaveGoodsApply()" size="mini">取消</el-button>
            </div>
        </div>
    </div>

    <!--详情 -->
    <div v-show="isShow == '3'" class="detailDiv">
        <el-descriptions class="margin-top" :column="2" size="small" border>
                <el-descriptions-item>
                    <template slot="label">
                        申领日期
                    </template>
                    <span>{{goodsApply.aApplyTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申领部门
                    </template>
                    <span>{{goodsApply.aDeptId}}</span>
                </el-descriptions-item>d
                <el-descriptions-item>
                    <template slot="label">
                        申领物品
                    </template>
                    <span>{{goodsApply.goodsName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        规格-型号
                    </template>
                    <span>{{goodsApply.aGoodsType}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        使用方式
                    </template>
                    <span>
                        {{goodsApply.aUseType|filterGender}}
                    </span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        当前库存
                    </template>
                    <span>{{goodsApply.aCurrentNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申领数量
                    </template>
                    <span>{{goodsApply.aNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        领取日期
                    </template>
                    <span>{{goodsApply.aGetTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item v-if="goodsApply.aUseType == '1'">
                    <template slot="label">
                        归还日期
                    </template>
                    <span>{{goodsApply.aReturnTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item> 
                    <template slot="label">
                        审批人
                    </template>
                    <span>{{goodsApply.aNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        备注
                    </template>
                    <span>{{goodsApply.aRemarks}}</span>
                </el-descriptions-item>
        </el-descriptions>
        <div class="divbtn1">
            <el-button class="but" @click="tabChange(1,goodsApplyNull)" size="mini">返回</el-button>
        </div>

    </div>
   
</div>
</template>

<script>
import { goodsList , deleteGoods , getByIdGoods , updateGoodsApply} from "@/api/administration/goods/goods";
import { listAll , saveGoodsApply , updateAState} from "@/api/administration/goodsApply/goodsApply";
import { getCurrentUser } from "@/api/system/user";
import { getByIdDept } from "@/api/system/dept";
import { getToken } from "@/utils/auth";
export default {
    name: 'RuoyiUiIndex',
    dicts:['a_state','goods_user_type','a_approver_id'],
    data() {
        return {
            searchInfo:{
                searchAState:'',
                searchAUseType:'',
                searchGoodsName:'',
            },
            pageGoodsApply:{
                pageNum:1,
                pageSize:2,
            },
            total:0,
            goodsApply:{
                aGoodsType:'',
                aUseType:'',
                aCurrentNumber:'',
                aApplyTime:'',
                aApprovalState:'',
                aApproverId:'',
                aGetTime:'',
            },
            loading:true,
            isShow: 1,
            pageGoods:{
                pageNum:1,
                pageSize:8,
                list:[],
            },
            flag:false,
            goodsApplyInfo:{
                useType:'',
                userName:'',
                deptName:'',
            },
            goodsApplyNull:{},
            isShows:0,
            goods:{},
        };
    },

    mounted() {
        this.listGoodsApplyList();
    },

    methods: {
        //申领物品列表
        listGoodsApplyList(){
            this.loading = true;
            this.goodsApply.pageNum = this.pageGoodsApply.pageNum;
            this.goodsApply.pageSize = this.pageGoodsApply.pageSize;
            this.goodsApply.goodsName = this.searchInfo.searchGoodsName;
            this.goodsApply.aState = this.searchInfo.searchAState;
            this.goodsApply.aUseType = this.searchInfo.searchAUseType;
            listAll(this.goodsApply).then(rel=>{
                if(rel.code == 200){
                    console.log(rel.data.list);
                    this.pageGoodsApply = rel.data;
                    this.total = rel.data.total;
                    this.loading = false;
                }
            })
        },
        //点击申请办公
        btnSaveGoodsApply(){
            this.isShow = 2;
            this.isShows = 1;
            this.listGoods();
            this.goodsApply.aGetTime = this.getNowTime();
            this.goodsApply.aApplyTime = this.getNowTime();
            this.goodsApply.aReturnTime = this.getNowTime();
            getCurrentUser().then(rel=>{
                this.goodsApplyInfo.userName = rel.data.user.nickName;
                this.goodsApply.aUserId = rel.data.userId;
                this.goodsApply.aDeptId = rel.data.deptId;
            })
            this.getDeptName();
        },
        getDeptName(){
            getByIdDept().then(rel=>{
                this.goodsApplyInfo.deptName = rel.data.deptName;
            })
        },
        //获取领用物品信息
        listGoods(){
            this.loading = true;
            this.goods.goodsName = this.searchInfo.searchGoodsName;
            this.goods.pageNum = this.pageGoods.pageNum;
            this.goods.pageSize = this.pageGoods.pageSize;
            goodsList(this.goods).then(rel=>{
                this.pageGoods = rel.data;
                this.total = rel.data.total;
                this.loading = false;
            })
        },
        //取消申领物品
        removeSaveGoodsApply(){
            this.isShow = 1;
            this.goodsApply = {
                aGoodsType:'',
                aUseType:'',
                aCurrentNumber:'',
                aApplyTime:'',
                aApproverId:'',
                aGetTime:'',
            };
        },
        //点击所选申领物品
        getGoodsApplyInfo(row){
            this.goods.goodsId = row;
            getByIdGoods(this.goods).then(rel=>{
                if(rel.code == 200){
                    this.goodsApply.aGoodsType = rel.data.goodsType;
                    this.goodsApply.aApproverId = '101';
                    this.goodsApplyInfo.useType = rel.data.goodsUserType == '1'?'借用':'领用';
                    this.goodsApply.aUseType = rel.data.goodsUserType;
                    this.goodsApply.aCurrentNumber = rel.data.goodsRemainderNumber;
                    this.flag = true;
                }
            })
        },
        //保存申领物品
        isSaveGoodsApply(){
            saveGoodsApply(this.goodsApply).then(rel=>{
                if(rel.code == 200){
                    this.isShow = '1';
                    this.goodsApply = {};
                    this.listGoodsApplyList();
                    this.$modal.msgSuccess("添加成功");
                }
            })
        },
        //点击详情
        tabChange:function(e,row){
            this.goodsApply = row;
            this.isShow = e;
		},
        //取消申领
        cancelGoodsApply(row){
            this.$confirm('是否取消申领?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.goodsApply = row;
                this.goodsApply.aState = '5';
                updateAState(this.goodsApply).then(rel=>{
                    if(rel.code == 200){
                        this.$message({
                            type: 'success',
                            message: '取消申领成功!'
                        });
                        this.listGoodsApplyList()
                    }
                })
              
            }).catch(() => {  
                this.listGoodsApplyList();
            });
        },
        //编辑申领物品
        editGoodsApply(row){
            this.isShow = 2;
            this.goodsApply = row;
            this.goodsApply.aApproverId = '101';
            this.goodsApplyInfo.useType = row.aUseType== '1'?'借用':'领用';
            this.flag = true;
            this.listGoods();
            this.isShows = 2;
        },
        /**
         * 条件查询
         */
        getPage(){
            this.pageGoodsApply.pageNum = 1;
            this.listGoodsApplyList();
        },

        /**
         * 公共方法获取时间
         */
        getNowTime() {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            var hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            var defaultDate = `${year}-${month}-${date}`;
            console.log(defaultDate)
            return defaultDate;
            this.$set(this.info, "stockDate", defaultDate);
        },

    },

    filters: {
        filterGender(val) {
            if (val == "2") {
                return "领用";
            } else if (val == '1') {
                return "借用";
            }
        },
        filterSorts(val){
            if(val == "1"){
                return "办公消耗品";
            } else {
                return "办公设备";
            }
        },
        filterDateFormat1(srcVal){
            if(!srcVal){
                return "";
            }
            return srcVal.substr(0,19).replace("T", " ");
        },
    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 53% 10px 32px;   
    }
    .div1 span{
        font-size : 12px;
    }
    .div1 .in1{
        margin: 0px 0px 0px 20px;
    }
    .div2{
        width: 95%;
        margin: 20px;
    }
    .inp1{
        width:450px;
    }
    .divP{
        width:600px;
        height:100px;
    }
    .divP p{
        float:left;
        margin-right:10px;
    }
    .searchBtn{
        margin:0px 0px 0px 15px;
    }
    .saveDiv .saveDiv1{
        width: 600px;
        margin:20px 0px 20px 122px;
    }
    .saveDiv .saveDiv1 span{
        font-size:14px;
        font-weight:bold;
    }
    .saveDiv .saveDiv2{
        width:1000px;
        margin: 0 auto;
        margin-top: 10px;
    }
    .saveDiv .saveDiv3{
        width: 200px;
        margin: 0 auto;
    }
    .detailDiv{
        width:1000px;
        margin:0 auto;
        margin-top:25px;
    }
    .divbtn1{
        width: 1000px;
        margin: 20px 0px 0px 0px;
    }
    .divbtn1  .but{
        float: right;
    }

</style>